<template>
  <div class="dashboard">
    <!-- 项目进度表格 -->
    <el-card class="table-card">
      <h2>项目进度</h2>
      <el-table :data="projects" style="width: 100%">
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="startDate" label="开始时间" />
        <el-table-column prop="endDate" label="结束时间" />
        <el-table-column prop="progress" label="进度">
          <template #default="scope">
            {{ scope.row.progress }}%
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 图表部分 -->
    <div class="charts-container">
      <!-- 第一行 -->
      <el-card class="chart-card">
        <div ref="customerPie" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card">
        <div ref="projectLine" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 第二行 -->
      <el-card class="chart-card">
        <div ref="workOrderLine" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card">
        <div ref="productionOrderLine" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { ElCard, ElTable, ElTableColumn } from 'element-plus';

export default {
  name: 'Dashboard',
  components: { ElCard, ElTable, ElTableColumn },
  setup() {
    const customerPie = ref(null);
    const projectLine = ref(null);
    const workOrderLine = ref(null);
    const productionOrderLine = ref(null);

    const projects = [
      { name: '项目A', startDate: '2025-01-01', endDate: '2025-06-01', progress: 75 },
      { name: '项目B', startDate: '2025-02-01', endDate: '2025-08-01', progress: 50 },
    ];

    onMounted(() => {
      // 初始化饼状图
      const pieChart = echarts.init(customerPie.value);
      pieChart.setOption({
        title: { text: '客户占比' },
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: '客户A' },
            { value: 310, name: '客户B' },
            { value: 234, name: '客户C' },
          ]
        }]
      });

      // 初始化项目累计曲线图
      const lineProjectChart = echarts.init(projectLine.value);
      lineProjectChart.setOption({
        title: { text: '项目累计' },
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
      });

      // 初始化工单数量曲线图
      const lineWorkOrderChart = echarts.init(workOrderLine.value);
      lineWorkOrderChart.setOption({
        title: { text: '工单数量' },
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [120, 132, 101, 134, 90, 230, 210], type: 'line' }]
      });

      // 初始化生产工单曲线图
      const lineProductionOrderChart = echarts.init(productionOrderLine.value);
      lineProductionOrderChart.setOption({
        title: { text: '生产工单' },
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [80, 120, 100, 150, 130, 180, 160], type: 'line' }]
      });
    });

    return { customerPie, projectLine, workOrderLine, productionOrderLine, projects };
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
}

.table-card {
  margin-bottom: 20px;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  width: 100%;
}
</style>